<!DOCTYPE html>
<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include.jsp"%>
<%@page import="java.util.ArrayList"%>
<%@page import="net.model.Clase"%>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Welcome</title>
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="../css/config.css" />
<link rel="stylesheet" type="text/css" href="../css/table.css" />
<link rel="stylesheet" type="text/css"
	href="../css/imgareaselect-default.css" />

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.validate.others.js"></script>


   <script type="text/javascript" src="../js/contextmenu.js"></script>
    <script type="text/javascript">
        SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
        SimpleContextMenu.attach('container', 'CM1');
    </script>
<!-- 
<script type="text/javascript" src="../scripts/jquery.min.js"></script>  -->
<script type="text/javascript"
	src="../scripts/jquery.imgareaselect.pack.js"></script>

<script type="text/javascript">
	$(function() {
		$('#form').validate({
			rules : {
				k : {
					required : true,
					number : true,
					min : 0,
					max : 255
				},
				nameOutFile : {
					required : true
				},
				mode : {
					required : true
				},
				moisture : {
					required : true,
					number : true,
					min : 0,
					max : 255
				}
			},
			messages : {
				k : {
					required : "<spring:message code="errorRequired" />",
					number : "<spring:message code="errorNumber" 	/>",
					min : "<spring:message code="errorMin" arguments="0" 	/>",
					max : "<spring:message code="errorMax" arguments="100" 	/>"
				},
				nameOutFile : {
					required : "<spring:message code="errorRequired" />"
				},
				mode : {
					required : "<spring:message code="errorRequired" />"
				},
				moisture : {
					required : "<spring:message code="errorRequired" />",
					number : "<spring:message code="errorNumber" 	/>",
					min : "<spring:message code="errorMin" arguments="0" 	/>",
					max : "<spring:message code="errorMax" arguments="100" 	/>"
				}
			},
			submitHandler : function(form) {
				form.submit();
			}
		});
	});
</script>
<script language="JavaScript">
	function point_it(event){
	    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	    document.classifficatonForm.form_x.value = pos_x;
	    document.classifficatonForm.form_y.value = pos_y;
	}
	function setNameClass( id){
	    document.classifficatonForm.form_change.value = id;
	}

</script>

</head>
<body>
	<%!String checked_i = "";
	String checked_c = "";%>
	<%
		if (session.getAttribute("mode") != null
				&& (session.getAttribute("mode")).equals("-c")) {
			checked_i = "";
			checked_c = "checked";
		} else {
			checked_i = "checked";
			checked_c = "";
		}
	%>
	<jsp:include page="/WEB-INF/views/menu.jsp" />
	<form:form id="form" name="classifficatonForm" method="post">
		<input type="hidden" name="k1" value="" />
		<input type="hidden" name="nameOutFile1" value="" />
		<input  name="form_change" type="hidden" /> 
		<table>
			<tr>
				<%
					if (request.getAttribute("clases") == null) {
				%>
				<fieldset>
					<legend>
						<spring:message code="menu.tools.kmeans" />
					</legend>
					<div>
						<spring:message code="k" />
						<input path="k" name="k" size="3" maxlength="3"
							value="<%=session.getAttribute("k")%>" />
						<errors path="k" cssClass="error" />
					</div>
					<div>
						<label for="nameOutFile" path="nameOutFile"><spring:message
								code="nameOutFile" /></label> <input path="nameOutFile"
							name="nameOutFile"
							value="<%=session.getAttribute("nameOutFile")%>" />
						<errors path="nameOutFile" cssClass="error" />
					</div>
					<div>
						<input type="radio" name="mode" value="-i" <%=checked_i%>>Iterativo<br>
						<input type="radio" name="mode" value="-c" <%=checked_c%>>Continuo
					</div>
					<div>
						<br> <input type="submit"
							value="<spring:message code="menu.tools.classify"/>"
							id="classifyKmeansOfObject" name="classifyKmeansOfObject" /> <br>
						<br>
					</div>
				</fieldset>
				<%
					}
				%>
			</tr>
			<tr>
				<td>
					<%
						if (request.getAttribute("clases") != null) {
					%>
					<div>
						<fieldset>
							<legend>
								<spring:message code="reference" />
							</legend>
							<c:forEach var="clase" items="${clases}">
								<div>
									<table>
										<br>
										<td>
											<table border="1" cellspacing="0" cellpadding="0"
												height="10px" width="10px">
												<tr>
													<td bgcolor="${clase.colorHex}"></td>
												</tr>
											</table>
										</td>
										<td><c:out value="${clase.descripcion}" /></td>
									</table>
								</div>
							</c:forEach>
						</fieldset>
					</div> 
					<%
 						}
 					%> 
 					<br>
					<br> 
				<%
 					if (request.getAttribute("objectsClassified") != null) {
				 %>
					<div>
						<fieldset>
							<legend>
								<spring:message code="classification" />
							</legend>
							<div >
								<div class="CSSTableGenerator">
								<table border="0" cellspacing="0" cellpadding="2">
									<tr>
										<td><b><spring:message code="classifications" /></b></td>
										<td><b><spring:message code="quantity" /></b></td>
										<td><b><spring:message code="area" /></b></td>
									</tr>
									<c:forEach var="result" items="${objectsClassified}" >
										<tr>
											<td><c:out value="${result[0]}" /></td>
											<td><c:out value="${result[1]}" /></td>
											<td><c:out value="${result[2]}" /></td>
										</tr>
									</c:forEach>
								</table>
							 </div>
								<br> <br>
								<div class="CSSTableGenerator">
								<table cellspacing="0" cellpadding="0" border="0"  width="80%" align='center'>
									<tr>
										<td><b><spring:message code="classifications" /></b></td>
										<td><b><spring:message code="quantity" /></b></td>
									</tr>
									<tr>
										<div>
											<td align='right'><b><spring:message code="moisture" />
													:&nbsp;&nbsp;</b></td>
											<td><input path="moisture" id="moisture" name="moisture"
												size="4" value="<%=session.getAttribute("moisture")%>" /> <errors
													path="moisture" cssClass="error" /></td>
										</div>
									</tr>
									<tr>
										<td align='right'><b><spring:message
													code="testWeight" /> :&nbsp;&nbsp;</b></td>
										<td><c:out value="${testWeight}" /></td>
									</tr>
									
									<tr>
										<td align='right'><b><spring:message code="result" />
												:&nbsp;&nbsp;</b></td>
										<td><c:out value="${result}" /> </td>
									</tr>
									<tr>
										<td align='right'><b><spring:message code="discount" />
												:&nbsp;&nbsp;</b></td>
										<td><c:out value="${discount}" /></td>
									</tr>
										
								</table>
								</div>
							<div><br> <br></div>
							<table cellspacing="0" cellpadding="0" border="0"  width="80%" align='center'>
									<tr>
									<td align='center'>
								<input type="submit"
									value="<spring:message code="recalculate"/>" id="recalculate"
									name="recalculate" />
									</td>
									<td align='center'>
									<input type="submit"
									value="<spring:message code="saveClassification"/>" id="saveClassification"
									name="saveClassification" />
									</td>
									</tr>
										
								</table>
							</div>
						</fieldset>
					</div> 
					<%
 						}
					%>
					
					<br><br>
				</td>
				<td>
					<%
						if (session.getAttribute("uploadFile") != null
									&& !(session.getAttribute("uploadFile")).equals("")) {
					%>
					<!-- <div style="height: 600px; width: 600px; overflow: scroll;"> -->
					<div class="container" style="height: 800px; width: 800px; overflow: scroll;"
							id="pointer_div" onMouseMove="point_it(event);">
						<img id="idImage" src="<%=session.getAttribute("uploadFile")%>"
							alt="Imagen a clasificar <%=session.getAttribute("uploadFile")%> " />
					</div>
					 X: <input type="text" name="form_x" size="4" /> - Y: <input
						type="text" name="form_y" size="4" /> <%
 	}
 %>
				</td>

				<td>
					<%
						if (request.getAttribute("objectsClassified2") != null) {
					%>
					<table border="1" cellspacing="0" cellpadding="2">
						<tr>
							<td><spring:message code="classifications" /></td>
							<td><spring:message code="quantity" /></td>
						</tr>
						<c:forEach var="result2" items="${objectsClassified2}">
										<tr>
											<td><c:out value="${result2[0]}" /></td>
											<td><c:out value="${result2[1]}" /></td>
										</tr>
									</c:forEach>
						
					</table>
					<%
						}
					%>
				</td>
			</tr>
		</table>

		<ul id="CM1" class="SimpleContextMenu">
			<li><a><spring:message code="change" />:</a>
				<ul>
					<c:forEach var="clase2" items="${clases}">
						<li><input type="submit" id="${clase2.nombre}"
							name="${clase2.nombre}" value="${clase2.descripcion}"
							onclick="setNameClass(id);"> </input></li>
					</c:forEach>
				</ul></li>
			<li><a><spring:message code="info" />:</a>
				<ul>
					<input type="submit" id="info" name="info" value="Ver"
						 />
				</ul></li>

		</ul>

	</form:form>
</body>
</html>